<template>
  <li class="setting-item" @click="$emit('click')" :data-type="type">
    <div class="left">
      <img 
        :src="icon" 
        class="item-icon" 
        :alt="`${title} Icon`"
        :style="{ width: iconSize || '24px', height: iconSize || '24px' }"
      />
      <span class="item-title">{{ title }}</span>
    </div>
    <img :src="arrowIcon" class="arrow-icon">
  </li>
</template>

<script setup>
defineProps({
  icon: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  arrowIcon: {
    type: String,
    required: true
  },
  type: {  // 添加type属性
    type: String,
    required: true
  },
  iconSize: {
    type: String,
    default: '30px' // 修改默认大小为30px
  }
})
</script>

<style scoped>
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px; /* 修改padding，将上下padding从20px改为12px */
  cursor: pointer;
  color: #5b5b5b;
  
  border-bottom: 1px solid #eee;
  background-color: white;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item:active {
  background-color: #f5f5f5;
}

.left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-icon {
  min-width: 30px;  /* 修改图标最小宽度 */
  min-height: 30px; /* 修改图标最小高度 */
  width: 30px;      /* 添加固定宽度 */
  height: 30px;     /* 添加固定高度 */
  object-fit: contain; /* 确保图标不变形 */
}

.item-title {
  font-size: 16px;
  color: #5b5b5b; /* 修改文字颜色 */
  font-family: "SourceHanFont"; /* 添加字体 */
  font-weight: normal; /* 添加这行确保使用普通字重 */
}

.arrow-icon {
  width: 24px;
  height: 24px;
  transform: rotate(180deg); /* 添加180度旋转 */
}
</style>
